<template>
	<scroll-view class="content-style" scroll-y lower-threshold="30" @scrolltolower="scrolltolower" style="height: calc(100vh - var(--window-bottom));">
		<view class="header-top">
			<image class="logo" src="@/static/image/logo.png"></image>
		</view>
		<view class="content-absolute">
			<view class="search-box">
				<image src="@/static/image/seach.png"></image>
				<input class="input" v-model="title" placeholder="关键词搜索" @input="input" @confirm="confirm"/>
			</view>
			<view class="institution">
				<text @click="selectInstitution">{{institution.name || '按机构查询'}}</text>
			</view>
			 <u-tabs :list="tabs" lineWidth="40" lineColor="#fff" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle" @click="changeStatus">
			</u-tabs>
			<view class="content-box">
				<view v-if="list.length > 0">
					<view class="item-box" v-for="(item, index) in list" :key="index" @click="detail(item)">
						<image class="thumb" :src="item.imgs" mode="aspectFill"></image>
						<view class="right-box">
							<text class="title">{{item.title}}</text>
							<view class="progress-box">
								<u-line-progress :percentage="item.percentage" activeColor="#EC7940" :showText="false" height="6"></u-line-progress>
								<view class="space-between">
									<view class="row-center">
										<text class="tit">目标</text>
										<text class="money">{{item.amount | moneyFormatter}}元</text>
									</view>
									<view class="row-center">
										<text class="tit">已筹</text>
										<text class="money">{{item.raiseAmount | moneyFormatter}}元</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-else class="zwsj-box">
					<image src="@/static/image/zwsj.png"></image>
					<text>抱歉, 没有找到你想要的内容</text>
				</view>
			</view>
		</view>
		<uni-institution-list ref="institution" @clickCompany="clickCompany"></uni-institution-list>
	</scroll-view>
</template>

<script>
	import { institution } from '@/api/index/index';
	import { list } from '@/api/activity/index';
	export default {
		data() {
			return {
				activeStyle: {
					color: '#fff',
					fontWeight: 'bold',
					transform: 'scale(1.1)'
				},
				inactiveStyle: {
					color: '#fff',
					transform: 'scale(1)'
				},
				page: 1,
				total: 0,
				list: [],
				title: '',
				status: 0,
				institutions: [],
				institution: {
					id: '',
					name: '按机构查询'
				},
				tabs: [{
					name: '全部'
				}, {
					name: '未开始'
				}, {
					name: '进行中'
				}, {
					name: '已完成'
				}]
			}
		},
		onLoad() {
			this.loadInstitutions();
			this.loadData();
			uni.$on('donationSuccess', response => {
				this.page = 1;
				this.loadData();
			})
		},
		methods: {
			/* 获取机构列表数据 */
			loadInstitutions() {
				institution(response => {
					this.institutions = response;
				}) 
			},
			
			/* 获取心愿墙分页数据 */
			loadData() {
				const params = {
					page: this.page,
					limit: 10,
					state: this.status,
					title: this.title,
					code: this.institution.code
				}
				list(params, (response, total) => {
					this.total = total;
					if (this.page == 1) {
						this.list = response;
					}else {
						this.list = this.list.concat(response);
					}
				})
			},
			
			/* 删除输入框内容 自动刷新界面 */
			input(e) {
				if (!e.detail.value) {
					this.loadData();
				}
			},
			
			/* 输入框确定 */
			confirm() {
				if (!this.title) {
					return;
				}
				this.loadData();
			},
			
			/* 选择机构 */
			selectInstitution() {
				this.$refs.institution.dialogVisible(this.institution, this.institutions);
			},
			
			/* 选择机构 */
			clickCompany(item) {
				this.institution = item;
				this.loadData();
			},
			
			/* 切换状态 */
			changeStatus(e) {
				let index = e.index;
				if (this.status == index) {
					return;
				}
				this.status = index;
				this.page = 1;
				this.loadData();
			},
			
			/* 跳转详情 */
			detail(item) {
				uni.navigateTo({
					url: `detail?id=${item.id}`
				})
			},
			
			scrolltolower() {
				if (this.total > this.list.length) {
					this.page++;
					this.loadData();
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-box {
		display: flex;
		align-items: center;
		margin: 40rpx 30rpx 0;
		width: 690rpx;
		height: 80rpx;
		background-color: #fff;
		border-radius: 12rpx;
		image {
			margin: 0 20rpx 0 25rpx;
			width: 30rpx;
			height: 33rpx;
		}
		.input {
			margin-right: 30rpx;
			flex: 1;
			font-size: 28rpx;
		}
	}
	
	.institution {
		margin: 40rpx 30rpx;
		color: #fff;
		font-size: 26rpx;
		text {
			border-radius: 10rpx;
			border: 1rpx solid white;
			padding: 5rpx 20rpx;
		}
	}
	
	.content-box {
		display: flex;
		flex-direction: column;
		height: 500rpx;
		border-radius: 40rpx 40rpx 0 0;
		padding-top: 20rpx;
		background-color: #F5F6F7;
	}
	
	.item-box {
		display: flex;
		margin: 15rpx 25rpx;
		padding: 25rpx;
		background-color: #fff;
		border-radius: 20rpx;
		border: 1rpx solid #EBECF1;
		box-sizing: border-box;
		.thumb {
			width: 170rpx;
			height: 170rpx;
			border-radius: 16rpx;
		}
		.right-box {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 20rpx;
			flex: 1;
			.title {
				font-size: 30rpx;
				font-weight: bold;
				color: #101010;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				white-space: normal;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			
			.progress-box {
				display: flex;
				flex-direction: column;
				.space-between {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 5rpx;
					.tit {
						color: #A0A0A0;
						font-size: 26rpx;
					}
					.money {
						color: #FA7856;
						font-size: 26rpx;
					}
				}
			}
		}
	}
	
	.zwsj-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 150rpx;
		image {
			width: 215rpx;
			height: 160rpx;
		}
		text {
			font-size: 28rpx;
			color: #333333;
		}
	}
</style>